<template>
  <div>
    <!-- 搜索表单 -->
    <el-form :model="table.where" class="ele-form-search ele-table-tool-default" size="small"
             @keyup.enter.native="$refs.memberTable.reload()"
             @submit.native.prevent>
      <el-row :gutter="15">
        <el-col :md="12" :sm="12">
          <el-form-item>
            <el-input v-model="table.where.name" placeholder="请输入姓名或学号" clearable size="small"/>
          </el-form-item>
        </el-col>
        <el-col :md="12" :sm="12">
          <div class="ele-form-actions">
            <el-button type="primary" @click="$refs.memberTable.reload()" icon="el-icon-search" class="ele-btn-icon"
                       size="small">查询
            </el-button>
            <el-button @click="showAssociateMember=true" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="small">关联人员</el-button>
            <el-button @click="showEdit=true" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="small">批量更换组</el-button>
            <el-button @click="remove()" type="danger" icon="el-icon-delete" class="ele-btn-icon" size="small">批量移除人员</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <!-- 数据表格 -->
    <ele-data-table ref="memberTable" :config="table" :choose.sync="choose" :height="tbHeight" highlight-current-row>
      <el-table-column type="selection" width="45" align="center"/>
      <el-table-column type="index" label="编号" width="60" align="center"/>
      <el-table-column prop="name" label="姓名" sortable="custom" show-overflow-tooltip min-width="120"/>
      <el-table-column prop="accommodation_type_name" label="人员类型" sortable="custom" show-overflow-tooltip min-width="110"/>
      <el-table-column prop="number" label="编号" sortable="custom" width="90px"/>
      <el-table-column prop="sort" label="组织" sortable="custom" width="90px"/>
      <el-table-column prop="group_name" label="所属考勤组" sortable="custom" width="150px"/>
      <el-table-column prop="rule_name" label="考勤规则" sortable="custom" width="150px"/>
      <el-table-column label="操作" width="150px" align="center" :resizable="false"  fixed="right">
        <template slot-scope="{row}">
          <el-link @click="edit(row)" icon="el-icon-edit" type="primary" :underline="false">更换组</el-link>
          <el-popconfirm title="确定要移除此人员吗？" @confirm="remove(row)" class="ele-action">
            <el-link slot="reference" icon="el-icon-delete" type="danger" :underline="false">移除</el-link>
          </el-popconfirm>
        </template>
      </el-table-column>
    </ele-data-table>

    <!--关联人员弹窗-->
    <el-dialog title="关联人员" :visible.sync="showAssociateMember" width="900px" :destroy-on-close="true" :lock-scroll="false" @open="dialogOpen">
      <el-form :model="editForm" ref="editForm" label-width="96px">
        <el-form-item label="住宿类型：" prop="accommodation_type_code">
          <el-select v-model="accommodationType" placeholder="请选择">
            <el-option
                v-for="item in accommodationTypes"
                :key="item.code"
                :label="item.name"
                :value="item.code + ':' + item.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row style="margin-top: 10px">
        <el-col :span="6">
          <el-tree :data="gradesData" :props="defaultProps" @node-click="handleNodeClick" class="custom-tree"></el-tree>
        </el-col>
        <el-col :span="18">
          <el-transfer
              :titles="['未设置考勤人员','已设置考勤人员']"
              filterable
              :filter-method="filterMethod"
              filter-placeholder="请输入人员姓名"
              v-model="value"
              :data="personDatas">
          </el-transfer>
        </el-col>
      </el-row>
      <div slot="footer">
        <el-button @click="showAssociateMember=false">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </el-dialog>

    <!--批量更换组弹窗-->
    <el-dialog title="关联人员" :visible.sync="showBatchChangeAttendGroup" width="900px" :destroy-on-close="true" :lock-scroll="false" @open="batchChangeAttendGroupDialogOpen">
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "MemberData",
  props: {
    dictTypeId: Number,  // 考勤组id
    tbHeight: String  // 表格高度
  },
  data() {
    const generateData = () => { // 生成数据函数
      const data = [];
      const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];
      const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: index,
          pinyin: pinyin[index]
        });
      });
      return data;
    };
    return {
      table: {url: '/attendGroup/list', where: {dictTypeId: this.dictTypeId}, page: true},  // 表格配置
      choose: [],  // 表格选中数据
      showAssociateMember: false,  // 是否显示关联人员表单弹窗
      showBatchChangeAttendGroup: false, // 是否显示批量更换人员考勤组表单
      editForm: {dict_type_id: this.dictTypeId, sort: 125},  // 表单数据
      accommodationType: '', // 住宿类型编码
      accommodationTypes: [], // 全部住宿类型编码

      gradesData: [{ // 所有年级信息
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      personDatas: generateData(),
      value: [],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      }
    }
  },
  methods: {
    /* 显示编辑 */
    edit(row) {
      this.editForm = Object.assign({}, row);
      this.showEdit = true;
    },
    /* 保存编辑 */
    save() {
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({lock: true});
          this.$http.post('/dictionary/edit', this.editForm).then(res => {
            loading.close();
            this.showEdit = false;
            this.$message({type: 'success', message: res.data.msg});
            this.$refs.memberTable.reload();
          }).catch(e => {
            loading.close();
            this.$message.error(e.message);
          });
        } else {
          return false;
        }
      });
      this.editForm={dict_type_id: this.dictTypeId, sort: 125};
    },
    /* 删除 */
    remove(row) {
      if (!row) {  // 批量删除
        if (this.choose.length === 0) return this.$message.error('请至少选择一条数据');
        let ids = this.choose.map(d => d.id);
        this.$confirm('确定要删除选中的字典项吗?', '提示', {type: 'warning'}).then(() => {
          const loading = this.$loading({lock: true});
          this.$http.post('/dictionary/destroy', {id: ids}).then(res => {
            loading.close();
            this.$message({type: 'success', message: res.msg});
            this.$refs.memberTable.reload();
          }).catch(e => {
            loading.close();
            this.$message.error(e.message);
          });
        }).catch(() => 0);
      } else {  // 单个删除
        const loading = this.$loading({lock: true});
        this.$http.post('/dictionary/destroy', {id:row.id}).then(res => {
          loading.close();
          this.$message({type: 'success', message: res.msg});
          this.$refs.memberTable.reload();
        }).catch(e => {
          loading.close();
          this.$message.error(e.message);
        });
      }
    },
    associateMemberDialogOpen() {
      this.getAccommodationTypes();
    },
    batchChangeAttendGroupDialogOpen() {

    },
    getAccommodationTypes() {
      this.$http.get('/student/getAccommodationType').then(res => {
        this.accommodationTypes = res.data.result;
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    handleNodeClick() {
      // 打开节点
    }
  },
  watch: {
    /* 监听字典id变化 */
    dictTypeId() {
      this.editForm.dict_type_id = this.dictTypeId;
      this.table.where = {dictTypeId: this.dictTypeId};
      this.$refs.memberTable.reload();
    }
  }
}
</script>

<style scoped>
.custom-tree {
  padding: 5px;
  border: 1px solid #EDEDED;
  border-radius: 4px;
  margin-right: 10px;
  height: 490px;
}

>>> .el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

>>> .el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

  /*有子节点 且未展开*/
>>>  .el-tree .el-icon-caret-right:before {
    background: url('~@/assets/tree/add.png') no-repeat 0 0px;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /*有子节点 且已展开*/
>>>  .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url('~@/assets/tree/minus.png') no-repeat 0 0px;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

  /*没有子节点*/
>>>  .el-tree .el-tree-node__expand-icon.is-leaf::before {
    background: #fff;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }

>>> .el-transfer-panel{
  width: 200px;
  height: 500px;
}
>>> .el-transfer-panel__list.is-filterable{
  height: 400px;
}
</style>